import React, {useEffect, useState, useRef} from 'react'
import {NavigationStackScreenComponent} from 'react-navigation-stack'
import {View, ScrollView, Text, TouchableOpacity} from 'react-native'
import {ShortBar, InfoLayout, Toast, RadiusButton} from 'components'
import {BookItem} from './components'
import {tradListStyle as styles, recognitionListStyle} from './styles'
import {commonStyle, definedColors, translateSize} from 'styles'
import pos, {PosAppTrade, PosCustomer, PosAppFee, PosAppBank} from 'api/pos'
import {getAuthorization, loginOut, operate, setLogin} from 'services/authorization'
import Loading from 'components/loading'
import {getMoneyFen} from 'utils'
import custom from 'api/custom'
import {navigate, navigateReplace} from '../../services/navigation'
/**
 * 收筹金
 * @param props
 */
const BookListScreen: NavigationStackScreenComponent<{
  // feeList: PosAppFee[]
  // customerInfo: PosCustomer
  data: any
  onNext: () => void
}> = props => {
  const [feeList, setFeeList] = useState<PosAppFee[]>([])
  const [bankList, setBankList] = useState<PosAppBank[]>([])
  const checkData = useRef<String[]>([])
  const [noData, setNoData] = useState(false)
  const [money, setMoney] = useState(0)

  const getBookFee = async () => {
    let projectId = getAuthorization().project.mdId
    let cstId = props.navigation.getParam('cstId')
    let res = await custom.sale.getBookFee({projectId, cstId})
    setFeeList(res.data)
  }
  useEffect(() => {
    getBookFee()
  }, [])

  return (
    <View style={{...commonStyle.containerColumn, minHeight: '100%'}}>
      {noData ? (
        <Text style={commonStyle.noDataWarn}>未找到认筹，请确认用户信息是否正确！</Text>
      ) : (
        <ScrollView>
          <View style={{...commonStyle.containerColumn, paddingHorizontal: translateSize(32)}}>
            {feeList.map((item, index) => (
              <BookItem
                data={item}
                bankList={bankList}
                key={index.toString()}
                index={index}
                onChange={(money, isCheck) => {
                  setMoney(money)
                  let data = checkData.current
                  if (item.erpId && !isCheck) {
                    data = checkData.current.filter(checkId => checkId != item.erpId)
                  } else {
                    data.push(item.erpId)
                  }
                  let newFeeList = feeList.map(fee => {
                    if (fee.erpId === item.erpId) {
                      fee.ye = money
                    }
                    return fee
                  })

                  checkData.current = data
                  setFeeList(newFeeList)
                }}
              />
            ))}
            <RadiusButton
              style={{
                marginTop: translateSize(280),
                height: translateSize(96),
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
                paddingHorizontal: translateSize(20),
              }}
              onPress={() => {
                navigate('ConfirmFund')
              }}>
              <Text
                style={{
                  color: definedColors.white,
                  fontSize: translateSize(28),
                }}>
                本次收款金额合计：
              </Text>
              <Text
                style={{
                  color: definedColors.white,
                  fontSize: translateSize(28),
                }}>
                {money}
              </Text>
            </RadiusButton>
          </View>
        </ScrollView>
      )}
    </View>
  )
}

BookListScreen.navigationOptions = props => {
  return {
    title: '收筹金',
    headerStyle: {
      margin: translateSize(0),
      elevation: 0,
      borderBottomWidth: 1,
      borderBottomColor: '#212447',
      backgroundColor: '#212447',
    },
    headerRight: (
      <TouchableOpacity
        style={recognitionListStyle.headerRight}
        onPress={() => {
          operate()
          props.navigation.getParam('onNext')()
        }}>
        <Text style={recognitionListStyle.headerFont}>确认</Text>
      </TouchableOpacity>
    ),
  }
}

export default BookListScreen
